/* eslint-disable @typescript-eslint/no-shadow */
import Modal from 'antd/lib/modal/Modal';
import React, { useEffect, useRef, useState } from 'react';
import type { PopPowerParams } from '@/services/device';
import { getDeviceInfo,popPowerBank,popAllPowerBank } from '@/services/device';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Card, Descriptions, message, Tag } from 'antd';
import { AlignCenterOutlined } from '@ant-design/icons';

export interface UseRateProps {
  uId: string | number;
  userType: string | number;
  token: string;
  cabinet_id: string | number;
  visible: boolean;
  onCancel: (e: React.MouseEvent) => void;
}

export type deviceItem = {
  device_id: string; 
  device_power: string; 
  lock_status: string; 
  return_status: string; 
  location: number | string; 
};





const UseRate: React.FC<UseRateProps> = (props) => {
  const { visible, onCancel, uId, userType, token,cabinet_id } = props;
  const [deviceInfo, setInfo] = useState<any>({});

  const ref = useRef<ActionType>();
  // 弹出单个
  const pop = async (power_bank_location: string) => {
   try {
     const data: PopPowerParams = {
              uId,
              userType,
              token,
              device_id: cabinet_id,
              power_bank_location
     }
     const res = await popPowerBank(data);
     if(res.code === 200) {
       message.success(res.msg);
       // 刷新
      ref?.current?.reload();
     }else {
       message.error(res.msg); 
     }
   } catch (error) {
     console.log(error)
   }
  };
  useEffect(() => {
    if (visible) {
      ref.current?.reload();
    }
  }, [visible]);
  
  const columns: ProColumns<deviceItem>[] = [
  {
    title: '槽位号',
    dataIndex: 'location',
    search: false,
  },
  {
    title: '设备编号',
    dataIndex: 'device_id',
    search: false,
  },
  {
    title: '移动电源电量',
    dataIndex: 'device_power',
    search: false,
  },
  {
    title: '移动电源状态',
    dataIndex: 'lock_status',
    search: false,
    render: (_, row) => {
        if (row.return_status == 1 && (row.device_id && row.device_id!== 'NULL')) {
          return (
            <Tag color="green" key={row.device_id}>
              正常
            </Tag>
          );
        }
        return (
          <Tag color="red" key={row.device_id}>
            无宝
          </Tag>
        );
      },
  },
  
  // {
  //   title: '归还状态',
  //   dataIndex: 'return_status',
  //   search: false,
  // },

];

// 固定操作栏
  columns.push({
    title: '操作',
    key: 'option',
    fixed: 'right',
    valueType: 'option',
    render: (_, row) => [
      // 使用率统计
      <Button
        disabled = {  row.return_status == 0 }
        key={row.location}
        type="primary"
        onClick={() => {
          pop(row.location)
        }}
      >
        <AlignCenterOutlined />
        弹出
      </Button>,
    ],
  });

  return (
    <Modal
      width={1200}
      title="机柜详情"
      visible={visible}
      onOk={onCancel}
      onCancel={onCancel}
      okText="确定"
      cancelButtonProps={{
        style: {
          display: 'none',
        },
      }}
    >
      {visible ? (
        <ProTable
          search = {false}
          actionRef={ref}
          rowKey="location"
          scroll={{ x: 'max-content' }}
          columns={columns}
          request={async () => {
            const data = {
              uId,
              userType,
              token,
              cabinet_id,
            };
            return getDeviceInfo(data);
          }}
          postData={(res) => {
              console.log('【获取设备数据】', res);
            setInfo((res as any));
            return (res as any).power_status;
          }}
          // 工具栏
          toolBarRender={() => [
          <Button
            onClick={async () => {
              try {
                  const data: PopPowerParams = {
                            uId,
                            userType,
                            token,
                            device_id: cabinet_id,
                  }
                  const res = await popAllPowerBank(data);
                  if(res.code === 200) {
                    message.success(res.msg);
                    // 刷新
                    ref?.current?.reload();
                  }else {
                    message.error(res.msg); 
                  }
                } catch (error) {
                  console.log(error)
                }
            }}
            >
              全部弹出
            </Button>
          ]}
          tableExtraRender={() => (
          <Card>
            <Descriptions size="small" bordered={true}>
              <Descriptions.Item label="型号">{deviceInfo.sign || '-'}</Descriptions.Item>
              <Descriptions.Item label="版本">{deviceInfo.version || 'v0.0.0'}</Descriptions.Item>
              <Descriptions.Item label="机柜编号">{deviceInfo.cabinet_id || '-'}</Descriptions.Item>
            </Descriptions>
          </Card>
          )}
        ></ProTable>
      ) : (
        <></>
      )}
    </Modal>
  );
};

export default React.memo(UseRate);
